<template>
  <div>
    <h1>事件对象</h1>
    <button @click="handleClick($event)">点击我</button>
    <button @click="handleClick1">点击我1</button>
    <button @click="handleClick2">点击我2</button>
    <button @click="handleClick3">点击我3</button>
    <button @click="handleClick4">点击我4</button>
    <h1>{{ count }}</h1>
    <button @click="handleClick5">点击我2</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const handleClick = (e) => {
  console.log(e);
};
const handleClick1 = () => {
  console.log("点击我1");
};
// const handleClick2 = (e) => {
//   console.log(e.target);
// };
const handleClick2 = (e) => {
  // 在控制台输出触发事件的 DOM 元素
  // e.target 是触发事件的元素，通常是用户点击的元素
  console.log(e.target);
};
const handleClick3 = (e) => {
  console.log(e.currentTarget);
};
const handleClick4 = (e) => {
  e.stopPropagation(); //阻止事件冒泡
  console.log(e.target);
};
const count = ref(0);
const handleClick5 = (event) => {
  count.value++;
  if (count.value % 2 === 0) {
    event.target.style.backgroundColor = "red";
  } else {
    event.target.style.backgroundColor = "green";
  }
};
</script>
